<template>
    <div>
        <el-dialog title="客户信息" v-model="showDialog" :width="dialogWidth" :append-to-body="true"
            :close-on-click-modal="false">
            <el-form label-width="120px" class="baseForm" :rules="rules" :model="form" ref="baseForm">
                <el-form-item label="登录名" class="item" prop="name">
                    <el-input v-model="form.name" class="form-input"></el-input>
                </el-form-item>
                <el-form-item label="密码" class="item" prop="password">
                    <el-input type="password" v-model="form.password" class="form-input"></el-input>
                </el-form-item>
                <el-form-item label="真实姓名" class="item" prop="trueName">
                    <el-input v-model="form.trueName" class="form-input"></el-input>
                </el-form-item>
                <el-form-item label="部门" class="item" prop="orgId">
                    <el-select v-model="form.orgId" placeholder="请选择">
                        <el-option v-for="item in orgs" :key="item.value" :label="item.name"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="性别" class="item" prop="sex">
                    <el-input v-model="form.sex" class="form-input"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" class="item" prop="phone">
                    <el-input v-model="form.phone" class="form-input"></el-input>
                </el-form-item>
                <el-form-item label="是否锁定" class="item" prop="isLock">
                    <el-checkbox v-model="form.isLock" />
                </el-form-item>

                <el-form-item label="是否管理员" class="item" prop="isAdmin">
                    <el-checkbox v-model="form.isAdmin" />
                </el-form-item>

                <el-form-item label="创建时间" class="item" v-if="form.createTime">
                    {{ form.createTime.replace('T', ' ').slice(0, 19) }}
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showDialog = false">取 消</el-button>
                    <el-button type="primary" @click="saveEdit" :disabled="!allowsave">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script>

const rules = {
    name: [{ required: true, message: '登录名不能为空', trigger: 'blur' }],
    trueName: [{ required: true, message: '真实姓名不能为空', trigger: 'blur' }],
    orgId: [{ validator:function(ru,value,callback){
        if(!value) return callback(new Error("请选择部门"));
        callback();
    }, trigger: 'change' }],
    sex: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
};
const emptyform = {
    name: '',
    trueName: '',
    pass: '',
    orgId: '',
    sex: '',
    isLock: false,
    isAdmin: false,
    phone: ''
};
export default {
    
    data() {
        return {
            form: Object.assign({}, emptyform),
            showDialog: false,
            allowsave: true,
            dialogWidth: window.innerWidth > 768 ? '768px' : '100%',
            orgs: [],
            rules
        }
    },
    methods: {
        showadd(row) {
            this.allowsave=true;
            this.form = Object.assign({}, row || emptyform);
            this.showDialog = true;
        },
        saveEdit() {
            this.$refs.baseForm.validate(ok => {
                if (!ok) return;
                this.$api.saler[this.form.id?'update':'add'](this.form).then(({state,msg})=>{
                    this.$message[state?'success':'warning'](msg);
                    if(state) {
                        this.$emit('search');
                        this.showDialog=false;
                    }
                });
            })
        }
    },
    mounted() {
        this.$api.dictionary.search(3).then(({ msg }) => {
            this.orgs = msg;
        });
    }
}
</script>
<style lang="scss" scoped>
.baseForm {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
</style>